<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div>
    <button>car</button>
    <button>fruit</button>
    <button>bear</button>
    <ul id="list">

    </ul>
  </div>
  <script>
    // 接受上个页面传递的hash值
    // console.log(location.hash)
    // var params = location.hash.substr(1)//car 
    // if (params == "car") {
    //   alert("本页面加载车辆信息")
    // }
    var btns = document.querySelectorAll("button");//["button","button","button"]
    btns[0].onclick = function () {
      location.hash = this.innerHTML;
    }
    btns[1].onclick = function () {
      location.hash = this.innerHTML;
    }
    btns[2].onclick = function () {
      location.hash = this.innerHTML;
    }

    // 三组数据 
    var car = ["本田", "五菱宏光", "宝马", "奔驰"]
    var fruit = ["橙子", "苹果", "香蕉", "桑葚"]
    var bear = ["哈啤", "雪花", "青岛", "百威"]

    var list = document.getElementById("list")
    // hash值改变事件
    window.onhashchange = function () {

      // 通过hash值找到对应的数据 加载对应的页面
      var hash = location.hash.substr(1) //car  bear fruit 
      var arr = []
      if (hash == "car") {
        arr = car;
      } else if (hash == "fruit") {
        arr = fruit;
      } else if (hash == "bear") {
        arr = bear
      }
      // 循环生成li  
      var str = ""
      for (var i = 0; i < arr.length; i++) {
        str += `<li>${arr[i]}</li>`
      }
      list.innerHTML = str;//将拼接好的li 放置到ul

    }

  </script>
</body>

</html>